<template>
    <!--index.wxml-->
    <view class="allPage">
        <view class="content">

            <!-- <view class="status">
                <text class="b"> {{json.orderStatusStr || ''  }}</text>
            </view> -->

            <view class="parts">
                <view class="head-box">
                    <view class="left">
                        <text class="t-name">
                            取消订单
                        </text>
                    </view>
                    <view class="right">

                    </view>
                </view>

                <view class="li" v-for=" goodsItem,idx in json.orderGoodsModelList" :key='goodsItem.id'>
                    <view class="p productBox">
                        <view class="imgs">
                            <image :src="$getImg(goodsItem.goodsPic)" mode="aspectFit" :lazy-load="true"></image>
                        </view>
                        <view class="info">
                            <view class="info-l">
                                <view class="name text-delic2">
                                    <text class="">
                                        {{ goodsItem.goodsName }}
                                    </text>
                                </view>
                                <view class="bottom">

                                    <view class="nums">
                                        <text>
                                            x {{goodsItem.goodsNum  }}
                                        </text>
                                    </view>

                                </view>
                            </view>
                            <view class="info-r">
                                <view class="price">
                                    <text class="min">￥</text> {{ goodsItem.payMoney }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="eval">

                    <div class="other">
                        <radio-group @change="radioChange" v-model="cancelReasonId">

                            <view class="eva-i" v-for="item,idx in reasonArr" :key="idx">
                                <label>
                                    <radio :value="item.value" style="transform:scale(0.8)" color="#ff8000" />
                                    <text class=" ">
                                        {{ item.name }}
                                    </text>
                                </label>
                            </view>
                        </radio-group>
                        <view class="iptBox">
                            <textarea class="textArea" placeholder-style="color:#888" placeholder="详细描述" v-model="cancelReason" maxlength="300"></textarea>
                        </view>
                    </div>
                </view>

            </view>

        </view>

        <view class="commonFoot">
            <view class="foot-btn-box fixed">
                <view class="foot-btn" @click="goSubmit">
                    <text>提交</text>
                </view>

            </view>
        </view>

    </view>
</template>
<script>

const app = getApp();
import { statusList, DealOrderInfo } from '../../../utils/configDIct.js'
export default {
    components: {},
    data () {
        return {
            orderId: '',
            json: {
                placeOrderUser: {},
                orderGoodsModelList: [],
                dispatcherUser: {},
                villageModel: {},
                flashSupermarketModel: {}
            },
            cancelReasonId: undefined,
            reasonArr: [
                {
                    name: '不需要了', value: 1,

                },
                {
                    name: '信息填错', value: 2,

                },
                {
                    name: '无人接单', value: 3,

                },
                {
                    name: '其他', value: 99,
                },

            ],
            cancelReason: undefined
        }
    },
    computed: {

    },

    onLoad (option) {

        this.orderId = option.id || '1701062094893735939'
        this.initPage()

        app.laterToken(bool => {

            app.logRecord('取消订单')

        })


    },
    mounted () {

    },
    methods: {
        initPage (cb) {

            this.$axios({ url: 'flash/supermarket/order/get?loading', data: this.orderId })
                .then(res => {

                    this.json = DealOrderInfo([res.data], this.statusList)[0]
                    // console.log('999999999999999',res)

                    cb && cb()

                })

        },

        //下拉刷新
        // onPullDownRefresh () {

        //     this.initPage(()=>{
        //         uni.stopPullDownRefresh();//停止刷新
        //     })

        // },
        radioChange (e) {

            // console.log('咋回事',e)

            this.cancelReasonId = e.detail.value

        },
        handleChange (e) {

            // console.log('咋回事',e)

            this.commentAnonymousOrNot = e.detail.value && e.detail.value.length > 0 ? 1 : 0
        },

        goSubmit () {

            if (this.cancelReasonId == undefined) {

                uni.showToast({
                    title: '请先选择原因',
                    icon: 'none'
                });

                return

            }

            // console.log('咋回123123123事', this.cancelReasonId)

            this.lastSubmit()


        },
        //最后的提交
        lastSubmit () {


            this.$axios({
                url: `flash/supermarket/order/user/cancel/order?loading`, type: "POST", data: [{
                    "cancelReason": this.cancelReason,
                    "cancelReasonId": this.cancelReasonId,
                    "orderId": this.orderId
                }]
            })
                .then((res) => {
                    if (res.code != 200) return
                    uni.showToast({
                        title: '取消订单成功',
                        icon: 'success',
                        success: () => {

                            setTimeout(() => {

                                uni.navigateBack()

                            }, 1000);
                        }
                    });
                })

        },


    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 30rpx 32rpx;
    .parts {
        padding: 30rpx 30rpx 30rpx;
    }
    .status {
        min-height: 52rpx;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }
    .head-box {
        overflow: hidden;
        margin-bottom: 40rpx;
        .left {
            float: left;
            font-weight: bold;
            color: #000;
            font-size: 38rpx;
        }
        .right {
            float: right;
            color: #666;
            font-size: 26rpx;
            .radio {
                display: flex;
                align-items: center;
            }
        }
    }
    .line {
        color: #565656;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        .l {
            text-align: left;
            margin-left: 10px;
            max-width: 500rpx;
            min-width: 160rpx;
        }
        .r {
            flex: 1;
            width: 100%;
            // border-bottom: 1rpx solid #f1f1f1;
            // padding-bottom: 20rpx;
            &.none {
                border: none;
            }
        }
        .b {
            // font-weight: bold;
        }
        .min {
            font-size: 24rpx;
        }
        ::v-deep .holderClass {
            color: #c1c1c1;
        }
        .icon {
            color: #c1c1c1;
            font-size: 24rpx;
            line-height: 38rpx;
        }
        .address {
            font-size: 22rpx;
            color: #565656;
        }
    }
    .sendAddress {
        font-size: 24rpx;
        color: #000;
        padding-top: 30rpx;
        margin-top: 30rpx;
        border-top: 1rpx solid #f6f6f6;
        line-height: 1.5;
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
}

.marekt {
    .marketInfo {
        display: flex;
        margin-bottom: 30rpx;
        .imgBox {
            width: 110rpx;
            height: 110rpx;
            background: #f6f6f6;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .info-right {
            padding-top: 10rpx;
            flex: 1;
            .market-name {
                font-size: 34rpx;
                color: #222;
                margin-bottom: 10rpx;
            }
            .market-addr {
                font-size: 24rpx;
                color: #888;
            }
        }
    }
}
.eva-i {
    // display: flex;
    // align-items: center;
    padding: 20rpx 0rpx;
    font-size: 32rpx;
    color: #333;

    &.big {
        font-size: 30rpx;
        color: #333;
    }
    .left {
        width: 100rpx;
    }
    .right {
        flex: 1;
        display: flex;
        align-items: center;
    }
}
.iptBox {
    background: rgb(250, 250, 250);
    border-radius: 6rpx;
    // height: 300rpx;
    padding: 32rpx;
    .textArea {
        height: 150rpx;
        width: 100%;
    }
}

.productBox {
    display: flex;
    .imgs {
        margin-right: 20rpx;
        image {
            width: 110rpx;
            height: 110rpx;
            background: #f1f1fe;
            border-radius: 6rpx;
        }
    }
    .info {
        display: flex;
        width: 100%;
        .info-l {
            flex: 1;
        }
        .info-r {
            text-align: right;
            min-width: 150rpx;
            margin-left: 10rx;
            font-size: 30rpx;
            .min {
                font-size: 22rpx;
            }
        }
        .name {
            font-size: 26rpx;
            color: #000;
            font-weight: bold;
        }
        .bottom {
            // padding-top: 10rpx;
            overflow: hidden;
            .nums {
                float: left;
                color: #888;
                font-size: 26rpx;
                margin: 6rpx 0;
                // .old-price {
                //     margin-left: 10rpx;
                //     text-decoration: line-through;
                // }
                // .col-red {
                //     font-size: 30rpx;
                // }
                // .mini {
                //     font-size: 26rpx;
                // }
            }
            .buy-btn {
                margin: 6rpx 0;
                float: right;
                min-width: 140rpx;
                text-align: right;
            }
        }
    }
}
</style>